<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'

import { ACCOUNT_DELETION_CONFIRM_TEXT } from '#shared/consts'
import { z } from 'zod'

const state = reactive({
  confirm: ''
})

const schema = computed(() =>
  z.object({
    confirm: z.custom(
      value => value === ACCOUNT_DELETION_CONFIRM_TEXT,
      $t('auth.confirm_account_deletion_error')
    )
  })
)

const formRef = useTemplateRef('form')

function onClickTriggerSubmit() {
  formRef.value?.submit()
}

const [loading, toggleLoading] = useToggle()

async function onSubmitDeleteAccount(payload: FormSubmitEvent<any>) {
  toggleLoading(true)
  //
  toggleLoading(false)
}
</script>

<template>
  <UPageCard
    icon="i-fluent:person-warning-24-filled"
    :title="$t('auth.account')"
    :description="$t('auth.account_deletion_description')"
    spotlight
    spotlight-color="error"
    :ui="{ leadingIcon: 'text-error' }"
  >
    <UModal :title="$t('auth.confirm_account_deletion_title')" :ui="{ footer: 'justify-end' }">
      <UButton color="error" class="w-fit">
        {{ $t('auth.account_deletion') }}
      </UButton>
      <template #body>
        <UForm
          ref="form"
          :state
          :schema
          @submit="onSubmitDeleteAccount"
        >
          <p class="mb-3 text-sm/normal">
            <I18nT keypath="auth.confirm_account_deletion_description">
              <template #text>
                <span class="text-error">{{ ACCOUNT_DELETION_CONFIRM_TEXT }}</span>
              </template>
            </I18nT>
          </p>
          <UFormField name="confirm">
            <UInput color="error" class="w-full" />
          </UFormField>
        </UForm>
      </template>
      <template #footer>
        <UButton color="error" :loading @click="onClickTriggerSubmit">
          {{ $t('auth.confirm_delete') }}
        </UButton>
      </template>
    </UModal>
  </UPageCard>
</template>
